import React, { memo } from "react";
import { Image, Typography } from "antd";
import { ProductImagePropsContainer } from "./style";
import { useNavigate } from "react-router-dom";
interface productImageProps {
  size: "large" | "small";
  title: string;
  coverImg: string;
  id: number;
  price: string | number;
}
const productImage = memo<productImageProps>(
  ({ id, size, title, coverImg, price }) => {
    const navigate = useNavigate();
    const goDetail = () => {
      navigate(`/home/productdetail/${id}`, { replace: true });
    };
    return (
      <ProductImagePropsContainer>
        {size === "large" ? (
          <Image src={coverImg} height={285} width={490} />
        ) : (
          <Image src={coverImg} height={120} width={240} />
        )}
        <div onClick={goDetail}>
          <Typography.Text type="secondary">
            {/* 截取一下标题  */}
            {title.slice(0, 25)}
          </Typography.Text>
          <Typography.Text type="danger" strong>
            ￥ {price} 起
          </Typography.Text>
        </div>
      </ProductImagePropsContainer>
    );
  },
);

export default productImage;
